<script setup>
import {
  diskTypeDict,
  netChargemodeDict,
  netSharetypeDict,
  serverChargingModeDict,
  serverPeriodTypeDict
} from '../../use/dicts'

const props = defineProps({
  formData: {
    type: Object,
    default: () => ({})
  }
})

const propFormData = computed(() => props.formData)
const parameter = computed(() => {
  let json = {}
  try {
    json = JSON.parse(unref(propFormData).parameter)
  } catch (e) {
    console.log(e)
  }
  return json
})
</script>

<template>
  <div>
    <a-descriptions bordered>
      <a-descriptions-item label="项目">
        {{ parameter.projectName }}
      </a-descriptions-item>

      <a-descriptions-item label="服务器名称">
        {{ parameter.name }}
      </a-descriptions-item>
      <a-descriptions-item label="服务器规格">
        {{ parameter.flavor }}
      </a-descriptions-item>
      <a-descriptions-item label="产品镜像">
        {{ parameter.imageName }}
      </a-descriptions-item>
      <a-descriptions-item label="磁盘大小"> {{ parameter.diskSize }}GB </a-descriptions-item>
      <a-descriptions-item label="磁盘类型">
        <fs-values-format :model-value="parameter.diskType" :dict="diskTypeDict" type="text" />
      </a-descriptions-item>

      <a-descriptions-item label="VPC">
        {{ parameter.vpcName }}
      </a-descriptions-item>
      <a-descriptions-item label="子网">
        {{ parameter.subnetName }}
      </a-descriptions-item>
      <a-descriptions-item label="公网付费方式">
        <fs-values-format
          :model-value="parameter.netChargemode"
          :dict="netChargemodeDict"
          type="text"
        />
      </a-descriptions-item>
      <a-descriptions-item label="公网类型">
        <fs-values-format
          :model-value="parameter.netSharetype"
          :dict="netSharetypeDict"
          type="text"
        />
      </a-descriptions-item>
      <a-descriptions-item label="公网带宽">
        {{ parameter.netBandwidth }} Mbits/s
      </a-descriptions-item>

      <a-descriptions-item label="安全组">
        {{ parameter.securityGroupName }}
      </a-descriptions-item>
      <a-descriptions-item label="可用区域">
        {{ parameter.availabilityZone }}
      </a-descriptions-item>

      <a-descriptions-item label="服务器付费方式">
        <fs-values-format
          :model-value="parameter.serverChargingMode"
          :dict="serverChargingModeDict"
          type="text"
        />
      </a-descriptions-item>
      <a-descriptions-item label="服务器付费周期">
        {{ serverPeriodTypeDict.getNodeByValue?.(parameter.serverPeriodType)?.label }}
      </a-descriptions-item>
      <a-descriptions-item label="购买数量">
        {{ parameter.serverPeriodAmount }}
        {{ parameter.serverPeriodType === 'month' ? '月' : '年' }}
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<style scoped lang="less"></style>
